<template>
    <div class="sign-up">
        <!-- 注册 -->
        <h1>注册</h1>
        <v-text-field v-model="hanname" label="中文名"></v-text-field>
        <v-text-field v-model="username" label="用户名"></v-text-field>
        <v-text-field v-model="password" label="密码" type="password"></v-text-field>
        <v-text-field v-model="email" label="邮箱"></v-text-field>
        <v-btn color="primary" @click="register()">注册</v-btn>
        <v-btn color="primary" text @click="signIn()">去登录</v-btn>
        <p><span v-text="tips" id="tip"></span></p>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'


export default defineComponent({
    setup() {
        
    },
    data(){
        return {
            hanname: '',
            username: '',
            password: '',
            email: '',
            tips: ''
        }
    },
    methods: {
        signIn(){
            this.$router.push({name:'Login'})
        },
        register(){
            let post_data = {
                hanname: this.hanname,
                username: this.username,
                password: this.password,
                email: this.email,
            }
            console.log(post_data)
            this.$api.user.SignUp(post_data).then(res=>{
                console.log(res)
                this.tips = res.data.message
                if(res.data.status==1){
                    this.$router.push({'name': 'Login'})
                }
            })
        }
    }
})
</script>

<style scoped>
.sign-up {
    width: 500px;
    margin: 0 auto;
    text-align: center;
    margin-top: 10%;
}
#tip {
    margin-left:20px;
    margin-top: 30px;
    font-size: 17px;
}
</style>